1. html

                 


                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 w-box"> <a href="#">
      <div class="w-img"><img src="images/1.png" class="img-responsive img-circle" alt="wellness"></div>
      <h4>Wellness Tourism</h4>
      </a>
     </div>



                

2. css

               
.img-circle{
  border-radius:50%;
}

.w-box {
	margin: 40px 0 0 0;
}
.w-box .w-img {
	width: 120px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 2;
  
}
.w-box .w-img:before {
	position: absolute;
	content: '';
	width: 140px;
	height: 140px;
	margin: 0;
	padding: 0;
	top: -10px;
	left: -10px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	z-index: -1;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.w-box:hover .w-img:before {
	background: rgba(94, 196, 0, 0.5);
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}
.w-box .w-img img {
	width: 100%;
	background-color: #fff;
}
.w-box h4 {
	color: #fff;
	margin: 0;
	padding: 25px 0 0 0;
	font-size: 13px;
	line-height: 19px;
	font-weight: 500;
	letter-spacing: .2px;
	text-align: center;
	text-transform: uppercase;
}